<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
import { useEditClassificationStore } from '../../store/editClassification';
import type { FormInstance } from 'element-plus'
import { useClassificationListStore } from '../../store/classificationList'
import classification from '../../api/classification';
const editClassificationStore = useEditClassificationStore()
const classificationListStore = useClassificationListStore()
const rules = {
}
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid) => {
        if (valid) {
            await classification.updateClassificationCategory(editClassificationStore.EditRufrom).then(() => {
                editClassificationStore.changeIsOpen(false)
                editClassificationStore.changeSubmit(true)
            })
            await classification.getClassificationList(classificationListStore.pageNum, classificationListStore.pageSize).then((res) => {
                classificationListStore.classificationList = res.data.data
            }).finally(() => {
                classificationListStore.changeLoading()
                editClassificationStore.changeSubmit(false)
            })
        }
    })
}
const ruleFormRef = ref<FormInstance>()

</script>
<template>
    <el-dialog v-model="editClassificationStore.isOpen" title="编辑分类" width="500" align-center>
        <el-form ref="ruleFormRef" :model="editClassificationStore.EditRufrom" :rules="rules" label-width="100px"
            class="demo-ruleForm">
            <el-form-item label="一级分类：" prop="category">
                <el-input v-model="editClassificationStore.EditRufrom.category" style="width: 240px;"></el-input>
            </el-form-item>
            <el-form-item label="状态：" prop="categoryIsDeactivate">
                <el-switch v-model="editClassificationStore.EditRufrom.categoryIsDeactivate" :active-value="1"
                    :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" active-text="启用"
                    inactive-text="停用"></el-switch>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="editClassificationStore.changeIsOpen(false)">取消</el-button>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    修改
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style scoped>
.demo-ruleForm {
    display: grid;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
}
</style>